<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直播销售系统弹幕处理演示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .danmaku-preview {
                height: 300px;
                background-color: rgba(0, 0, 0, 0.8);
                position: relative;
                overflow: hidden;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <header class="bg-white shadow-sm py-4">
        <div class="container mx-auto px-4 flex items-center justify-between">
            <h1 class="text-xl font-bold text-primary">直播销售系统弹幕处理演示</h1>
        </div>
    </header>

    <main class="flex-grow container mx-auto px-4 py-6">
        <div class="bg-white rounded-xl shadow-sm p-6 max-w-4xl mx-auto">
            <h2 class="text-xl font-semibold mb-6">弹幕预览</h2>
            
            <!-- 弹幕预览区域 -->
            <div id="danmaku-preview" class="danmaku-preview rounded-lg mb-6">
                <img src="https://picsum.photos/id/1039/800/400" alt="直播封面" class="w-full h-full object-cover opacity-40">
            </div>
            
            <!-- 弹幕输入区域 -->
            <div class="mb-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                    <div class="md:col-span-3">
                        <input type="text" id="danmaku-input" placeholder="输入弹幕内容..." class="w-full p-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    </div>
                    <div>
                        <select id="danmaku-color" class="w-full p-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                            <option value="#FFFFFF">白色</option>
                            <option value="#FF0000">红色</option>
                            <option value="#00FF00">绿色</option>
                            <option value="#0000FF">蓝色</option>
                            <option value="#FFFF00">黄色</option>
                            <option value="#FF00FF">紫色</option>
                            <option value="#00FFFF">青色</option>
                        </select>
                    </div>
                </div>
                <button id="send-danmaku" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg transition-colors flex items-center">
                    <i class="fa fa-paper-plane mr-2"></i> 发送弹幕
                </button>
            </div>
            
            <!-- 测试用例区域 -->
            <div class="mb-6">
                <h3 class="font-medium mb-3">测试用例</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <button class="test-case p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors text-left" data-text="普通文本弹幕测试">
                        <span class="font-medium">普通文本</span>
                        <p class="text-sm text-gray-600">普通文本弹幕测试</p>
                    </button>
                    <button class="test-case p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors text-left" data-text="包含HTML标签的弹幕测试 &lt;b&gt;粗体&lt;/b&gt; &lt;i&gt;斜体&lt;/i&gt;">
                        <span class="font-medium">HTML标签</span>
                        <p class="text-sm text-gray-600">包含HTML标签的弹幕测试</p>
                    </button>
                    <button class="test-case p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors text-left" data-text="包含特殊符号的弹幕测试 !@#$%^&amp;*()_+{}|:&quot;&lt;&gt;?">
                        <span class="font-medium">特殊符号</span>
                        <p class="text-sm text-gray-600">包含特殊符号的弹幕测试</p>
                    </button>
                    <button class="test-case p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors text-left" data-text="包含表情符号的弹幕测试 :smile: :heart: :thumbup:">
                        <span class="font-medium">表情符号</span>
                        <p class="text-sm text-gray-600">包含表情符号的弹幕测试</p>
                    </button>
                    <button class="test-case p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors text-left" data-text="包含XSS攻击尝试的弹幕 &lt;script&gt;alert('XSS')&lt;/script&gt;">
                        <span class="font-medium">XSS攻击尝试</span>
                        <p class="text-sm text-gray-600">包含恶意脚本的弹幕测试</p>
                    </button>
                    <button class="test-case p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors text-left" data-text="包含CSS注入尝试的弹幕 &lt;span style='color:red;font-size:24px'&gt;自定义样式&lt;/span&gt;">
                        <span class="font-medium">CSS注入尝试</span>
                        <p class="text-sm text-gray-600">包含自定义样式的弹幕测试</p>
                    </button>
                </div>
            </div>
            
            <!-- 处理结果 -->
            <div>
                <h3 class="font-medium mb-3">处理结果</h3>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <div class="flex flex-col md:flex-row gap-4">
                        <div class="md:w-1/2">
                            <p class="font-medium mb-2">原始文本：</p>
                            <div id="original-text" class="p-3 bg-white rounded border border-gray-200 min-h-[80px] overflow-auto"></div>
                        </div>
                        <div class="md:w-1/2">
                            <p class="font-medium mb-2">处理后文本：</p>
                            <div id="processed-text" class="p-3 bg-white rounded border border-gray-200 min-h-[80px] overflow-auto"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-white border-t border-gray-200 py-4 mt-8">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>© 2025 直播销售系统 | 弹幕处理演示</p>
        </div>
    </footer>

    <script src="danmaku-filter.js"></script>
    <script src="danmaku-renderer.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 创建弹幕渲染器
            const danmakuRenderer = initDanmakuRenderer('danmaku-preview', {
                speed: 4,
                fontSize: 18,
                showAvatar: true,
                filterOptions: {
                    // 自定义配置
                    allowedTags: ['b', 'i', 'u', 's', 'em', 'strong', 'span'],
                    allowedAttributes: {
                        'span': ['style']
                    },
                    allowedStyles: ['color', 'font-size']
                }
            });
            
            // 发送弹幕按钮点击事件
            const sendButton = document.getElementById('send-danmaku');
            const danmakuInput = document.getElementById('danmaku-input');
            const danmakuColor = document.getElementById('danmaku-color');
            const originalText = document.getElementById('original-text');
            const processedText = document.getElementById('processed-text');
            
            sendButton.addEventListener('click', function() {
                const text = danmakuInput.value.trim();
                if (!text) return;
                
                // 显示原始文本
                originalText.textContent = text;
                
                // 获取处理后的文本
                const processed = danmakuRenderer.filter.process(text);
                processedText.innerHTML = processed;
                
                // 添加弹幕
                danmakuRenderer.addDanmaku({
                    text: text,
                    color: danmakuColor.value,
                    avatarUrl: 'https://picsum.photos/id/' + (Math.floor(Math.random() * 100) + 1) + '/200/200',
                    userName: '用户' + Math.floor(Math.random() * 10000)
                });
                
                // 清空输入框
                danmakuInput.value = '';
            });
            
            // 测试用例按钮点击事件
            const testCases = document.querySelectorAll('.test-case');
            testCases.forEach(button => {
                button.addEventListener('click', function() {
                    const text = this.getAttribute('data-text');
                    danmakuInput.value = text;
                    
                    // 显示原始文本
                    originalText.textContent = text;
                    
                    // 获取处理后的文本
                    const processed = danmakuRenderer.filter.process(text);
                    processedText.innerHTML = processed;
                });
            });
            
            // 按Enter发送弹幕
            danmakuInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    sendButton.click();
                }
            });
            
            // 自动发送一些测试弹幕
            const testDanmakus = [
                { text: '这个产品看起来很不错啊 :smile:', color: '#FFFFFF' },
                { text: '主播讲解得太详细了，非常专业！', color: '#00FF00' },
                { text: '请问这个产品有折扣吗？', color: '#FFFF00' },
                { text: '<b>强烈推荐</b>这款产品，我已经用过了，效果非常好！', color: '#0000FF' },
                { text: '包含恶意脚本的尝试 <script>alert("XSS");</script>', color: '#FF0000' },
                { text: '包含特殊符号的测试 !@#$%^&*()_+{}|:<>?', color: '#FF00FF' },
                { text: '请问什么时候发货？<span style="color:red">急需</span>', color: '#00FFFF' }
            ];
            
            // 每隔3秒发送一条测试弹幕
            let index = 0;
            setInterval(() => {
                if (index < testDanmakus.length) {
                    danmakuRenderer.addDanmaku({
                        ...testDanmakus[index],
                        avatarUrl: 'https://picsum.photos/id/' + (Math.floor(Math.random() * 100) + 1) + '/200/200',
                        userName: '观众' + Math.floor(Math.random() * 10000)
                    });
                    index++;
                }
            }, 3000);
        });
    </script>
</body>
</html>    